
<template>
    <div class="hello">
        <div class="deal-market">
            <div class="deal-search">
                <div class="deal-search-left">
                    <span
                        :class="[clickType==index?'changeColor':'']"
                        v-for="(item,index) in type"
                        :key="index"
                        @click="clickTypes(index,item)"
                    >{{item}}</span>
                </div>
            </div>
            <el-table @row-click="clickToBi" :data="tableData" v-loading="loading" border style="width: 100%;margin-bottom:450px">
                <el-table-column prop="symbol" :label="$t('message.types')" min-width="120"></el-table-column>
                <el-table-column prop="close" :label="$t('message.latestPrice')" min-width="120">
                    <template slot-scope="scope">
                        <span>{{scope.row.close}}</span><br>
                       <span style="font-size:8px;color:#ccc"> ≈ ￥{{scope.row.close * scope.row.motherRateForCNY | pointCNY}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="riseAndfall" :label="$t('message.Change')" min-width="120">
                    <template slot-scope="scope">
                        <span
                            :class="[scope.row.riseAndfall>0?'greenColor':'redColor']"
                        >{{scope.row.riseAndfall | persent}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="high" :label="$t('message.highest')" min-width="100">
                    <template slot-scope="scope">
                        <span>{{scope.row.high}}</span><br>
                       <span style="font-size:8px;color:#ccc"> ≈ ￥{{scope.row.high * scope.row.motherRateForCNY | pointCNY}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="low" :label="$t('message.lowestPrice')" min-width="100">
                <template slot-scope="scope">
                        <span>{{scope.row.low}}</span><br>
                       <span style="font-size:8px;color:#ccc"> ≈ ￥{{scope.row.low * scope.row.motherRateForCNY | pointCNY}}</span>
                    </template></el-table-column>
                <el-table-column prop="volume" :label="$t('message.totalTransaction')" min-width="150"></el-table-column>
                <el-table-column :label="$t('message.operation')" width="100">
                    <template slot-scope="scope">
                    <span @click="clickUrl(scope.row)" style="color:#688eff;cursor: pointer;">{{$t('message.Toview')}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
 <script>
// import { deals , wsURL,getMotherCoinName} from "../api/api";
import { setInterval } from 'timers';
export default {
    data() {
        return {
            loading: true,
            type: [],
            clickType: 0,
            clickTypeName: "",
            tableData: [],
            wsList: []
        };
    },
    created() {
        
        this.getMothenBi();
        this.initBType();
        this.setInitBiType();
        
    },
    destroyed: function() {
       
    },
    methods: {
        clickToBi(){
            // this.$router.push({
            //     path:"/deal"
            // })
        },
        initList(){
            var params = {
                motherCoinName: this.clickTypeName
            };
            deals({
                params: params
            }).then(res => {
                //console.log(res.data);
                if (res.data.code == 200) {
                    this.tableData = res.data.data;
                }
            });
        },
        getMothenBi(){
            getMotherCoinName().then(res=>{
                this.type = res.data.data
                this.clickTypeName = res.data.data[0]
                //console.log(this.clickTypeName,33)
                this.initList();
            })
        },
        clickTypes(index, name) {
            this.clickType = index;
            this.clickTypeName = name;
            //console.log(this.clickType);
            this.initBType();
        },
        setInitBiType(){
            setInterval(()=>{      
            var params = {
                motherCoinName: this.clickTypeName
            };
            deals({
                params: params
            }).then(res => {
                // //console.log(res.data);
                if (res.data.code == 200) {
                    this.tableData = res.data.data;
                }
            });
            },5000)
        },
        initBType() {
            this.loading = true;
            var params = {
                motherCoinName: this.clickTypeName
            };
            deals({
                params: params
            }).then(res => {
                //console.log(res.data);
                if (res.data.code == 200) {
                    this.tableData = res.data.data;
                    // this.tableDataList();
                    this.loading = false;
                }
            });
        },
        // tableDataList() {
        //     var that = this;
        //     if ("WebSocket" in window) {
        //         var ws = new WebSocket(wsURL.wsOneDay);
        //         ws.onopen = function() {
        //             ws.send(this.$t('message.Tosenddata'));
        //         };
        //         ws.onmessage = function(evt) {
        //             var received_msg = JSON.parse(evt.data);
        //             var arrList = [];
        //             for (var i = 0; i < received_msg.data.length; i++) {
        //                 if (
        //                     that.clickTypeName ==
        //                     received_msg.data[i].motherCoinName
        //                 ) {
        //                     arrList.push(received_msg.data[i].entity);
        //                     for (var i = 0; i < arrList.length; i++) {
        //                         that.$set(that.tableData, i, arrList[i]);
        //                     }
        //                 }
        //             }
        //             //console.log(arrList, 99999);
        //             //console.log(that.tableData);
        //         };
        //         ws.onclose = function() {
        //             //console.log(this.$t('message.Connection'));
        //         };
        //     } else {
        //         alert("您的浏览器不支持 WebSocket!");
        //     }
        // },
        colseWs() {
            var ws = new WebSocket("ws://192.168.1.15:10023/websocket");
            ws.onclose = function() {
                 //console.log(this.$t('message.Connection'));
            };
        },
        clickUrl(row){
            // console.log(row)
            // console.log(row.symbol.indexOf("ETH"),666)
            var bb = row.symbol.split('/')[0]
            // console.log(bb)
            // if(bb == "HOB" ){
            //         return false
            // }
            var childName = row.symbol.substring(0,row.symbol.indexOf('/'))
            var mothenName = row.symbol.substring(row.symbol.indexOf('/')+1,row.symbol.length)
            //console.log(childName,333)
            //console.log(mothenName,444)
            this.$router.push({
                path:'/deal',
                query:{
                    childName:childName,
                    mothenName:mothenName,
                    name:row.symbol,
                    childId:row.childCoin,
                    matherId:row.motherCoin,
                }
            })
        }
    },
    filters: {
        plusOrMinus(val) {
            if (val > 0) {
                return "+" + val;
            } else {
                return val;
            }
        },
        pointCNY(val) {
				return val.toFixed(2)
            },
        persent(val){
            return (val*100).toFixed(2) + "%"
        }
    }
};
</script>
<style lang="scss" scoped>
.hello{
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
}
.redColor {
    color: #eb375d;
}
.greenColor {
    color: #4cdfb0;
}
.deal-market {
    max-width: 1280px;
    min-width: 800px;
    margin: 20px auto;
    .deal-search {
        border: 1px solid #eee;
        box-shadow: 0 0 2px 0 #eee;
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30px;
        box-sizing: border-box;
        .deal-search-left {
            .changeColor {
                background-color: #6881ff !important;
                color: white !important;
            }
            span {
                padding: 6px 12px;
                font-size: 16px;
                color: #afaeae;
                cursor: pointer;
                margin-right: 20px;
                border-radius: 4px;
            }
        }
        .deal-search-right {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border: 1px solid #eee;
            padding: 6px 8px;
            border-radius: 20px;
            input {
                margin-left: 10px;
                border: none;
                outline: none;
                background-color: #f2f2f2;
            }
        }
    }
}
</style>
 
